<template>
    <div class="boxss">
        <div class="flex flexa flexJ">
            <div class="titles">财务数据</div>
                <div class="segmented-controls flex flexa">
            <div @click="toggle(1)" class="segments"  :class="{active:tongjiData.dataRange===1}">今天</div>
            <div @click="toggle(2)" class="segments" :class="{active:tongjiData.dataRange===2}">昨天</div>
            <div @click="toggle(3)" class="segments" :class="{active:tongjiData.dataRange===3}">本月</div>
          </div>
        </div>
        
        <div class="comp9-box" >
            <div class="flex flexa ">
                <div class="flex flexa flexn">
                    <img class="title-img" src="@/assets/img/index/comp9-1.png" alt="">
                    <div>
                        <div class="titles-name">收入金额</div>
                        <div class="titles-num" v-if="checkPermi(['home:financial:data'])">¥ {{ backOrder.income }}</div>
                        <div class="titles-num" v-else>***</div>
                    </div>
                </div>
                <div class="right-img">
                    <img src="@/assets/img/index/comp9-1-1.png" alt="">
                </div>
            </div>

            <div class="flex flexa">
                <div class="flex flexa flexn">
                    <img class="title-img" src="@/assets/img/index/comp9-2.png" alt="">
                    <div>
                        <div class="titles-name">支出金额</div>
                        <div class="titles-num" v-if="checkPermi(['home:financial:data'])">¥ {{ backOrder.outlay }}</div>
                        <div class="titles-num" v-else>***</div>
                    </div>
                </div>
                <div class="right-img">
                    <img src="@/assets/img/index/comp9-2-1.png" alt="">
                </div>
            </div>

            <div class="flex flexa">
                <div class="flex flexa flexn">
                    <img class="title-img" src="@/assets/img/index/comp9-3.png" alt="">
                    <div>
                        <div class="titles-name">盈利</div>
                        <div class="titles-num" v-if="checkPermi(['home:financial:data'])">¥ {{ backOrder.profit }}</div>
                        <div class="titles-num" v-else>***</div>
                    </div>
                </div>
                <div class="right-img">
                    <img src="@/assets/img/index/comp9-3-1.png" alt="">
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import homeApi from "@/api/home/newIndex";
 export default {
  data() {
    return {

      tongjiData: {
       dataRange:1
      },
      backOrder:{},
    }
  },
  created() {
    this.getTongjiData()
  },
  methods:{
   async getTongjiData() {
       const res = await homeApi.financial(this.tongjiData)
       this.backOrder = res.data
    },
        toggle(index) {
         this.tongjiData.dataRange =index
         this.getTongjiData()
    },
  }
 }
</script>
<style lang="scss" scoped>
@import url('./style.css');
.comp9-box {
    // display: grid;
    // grid-template-columns: repeat(3, 1fr);
    margin-top: 14px;
    // gap:0 12px;
    >.flex {
        border-radius:10px;
        border: 1px solid #E8E8E8;
        padding: 10px 15px 10px 8px;
        margin-bottom: 12px;
    }
}
.title-img {
    width: 14px;
    margin-right: 4px;
}
.titles {
    font-weight: bold;
}
.titles-name {
    font-size: 16px;
    color: #000000;
}
.titles-num {
    margin-top: 12px;
font-size: 20px;
color: #333333;

}

.right-img {
    width: 28px;
    img {
        width: 100%;
    }
}
.flexn {
    flex: 1;
    align-items: baseline;
}
</style>
